<template>
  <el-cascader
    class="product-type-select"
    @change="handleChanged"
    clearable
    filterable
    remote
    :remote-method="loadProductTypes"
    :placeholder="'产品品类'"
    :options="productTypes"
    v-model="selectedType"
  >
    <!--          value-key="id"
-->
    <!--    <el-option :key="item.id" :value="item" v-for="item in productTypes">-->
    <!--      <div class="producttype-select-item">-->
    <!--        &lt;!&ndash;        <span>{{ item.value }}</span>&ndash;&gt;-->
    <!--        <span>{{ item.productType }}</span>-->
    <!--      </div>-->
    <!--    </el-option>-->
  </el-cascader>
</template>

<script>
export default {
  name: 'ProductTypeSelect',
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      productTypes: [],
      selectedType: []
    }
  },
  watch: {

    type: {
      handler: function (newValue, oldValue) {
        this.selectedType = [newValue]
      },
      immediate: true
    }
  },
  created () {
    this.loadProductTypes()
  },
  methods: {
    handleChanged (value) {
      let type = this.selectedType && this.selectedType.length > 0 ? this.selectedType[0] : ''
      this.$emit('update:type', type)
      this.$emit('change', type)
    },
    loadProductTypes () {
      this.$http
        .get('/product/pproductinfo/producttypelist', {
          params: { page: 1, limit: 100 }
        })
        .then(res => {
          this.productTypes = res.data.data.map(item => {
            // return item
            return {
              value: item.id,
              label: `${item.productType}${item.typeCode && item.typeCode.length > 0 ? '(' + item.typeCode + ')' : ''}`
            }
          })
        })
    }
  }
}
</script>

<style scoped lang="scss">
.product-type-select {
  .producttype-select-item {
    flex-direction: row;
    justify-content: space-between;
  }
}
</style>
